import React, { useState, useEffect } from 'react'
import request from "../../utils/requests";
import "./shoppingCar.css"
import {
    useNavigate,
} from "react-router-dom";
import { Empty } from 'antd';
export default function Shopping () {
    const [shopping, setShopping] = useState([])
    const [check, setCheck] = useState(true)
    const [shoppingsum, setShoppingsum] = useState(0)
    const [shoppingprice, setShoppingprice] = useState(0.00)
    const [color, setColor] = useState()
    const navigate = useNavigate()
    useEffect(async () => {
        const { data } = await request('/shoppingcar', { method: "GET" })
        if (data.success) {
            setShopping([...data.result])
        }
    }, [])
    const subtract = async (item, e) => {
        if (item.quantity == 1) {
            setShopping(shopping.filter((goods) => {
                return goods.id != item.id
            }))
        } else {
            shopping.map((goods) => {
                if (goods.id == item.id) {
                    goods.quantity = goods.quantity - 1
                }
            })
            setShopping([...shopping]);
        }
        if (e.nativeEvent.path[4].firstChild.firstChild.firstChild.checked == true) {
            setShoppingprice(shoppingprice - item.price)
            setShoppingsum(shoppingsum - 1)
        }
        let data = { id: item.id }
        await request('/shoppingcar/sub/shopping', { method: "POST", data })
    }
    const add = async (item, e) => {
        shopping.map((goods) => {
            if (goods.id == item.id) {
                goods.quantity = goods.quantity + 1
            }
        })
        setShopping([...shopping]);
        if (e.nativeEvent.path[4].firstChild.firstChild.firstChild.checked == true) {
            setShoppingprice(shoppingprice + item.price)
            setShoppingsum(shoppingsum + 1)
        }
        let data = { id: item.id }
        await request('/shoppingcar/add/shopping', { method: "POST", data })
    }
    const del = async (item, e) => {
        setShopping(shopping.filter((goods) => {
            return goods.id != item.id
        }))
        if (e.nativeEvent.path[3].firstChild.firstChild.firstChild.checked == true) {
            setShoppingprice(shoppingprice - item.price * item.quantity)
            setShoppingsum(shoppingsum - item.quantity)
        }
        await request('/shoppingcar/del', { method: "POST", data: { id: [item.id] } })
    }
    const all = () => {
        setCheck(!check)
        const item = document.getElementsByClassName('checkAll')
        for (let i = 0; i < item.length; i++) {
            item[i].checked = check
        }
        let sum = 0
        let price = 0
        shopping.map((item) => {
            sum += item.quantity
            price += item.price * item.quantity
        })
        if (check == true) {
            setShoppingsum(sum)
            setShoppingprice(price)
            setColor('color')
        } else {
            setShoppingsum(0)
            setShoppingprice(0)
            setColor('')
        }

    }
    const checkOne = (item, e) => {
        if (e.target.checked == true) {
            setShoppingprice(shoppingprice + item.price * item.quantity)
            setShoppingsum(shoppingsum + item.quantity)
            setColor('color')
        } else {
            setShoppingprice(shoppingprice - item.price * item.quantity)
            setShoppingsum(shoppingsum - item.quantity)
            const index = document.getElementsByClassName('checkAll')
            for (let i = 0; i < index.length; i++) {
                if(index[i].checked == true){
                    return
                }else {
                    setColor('')
                }
            }
        }
    }
    const settlement = (e) => {
        if (e.target.className == 'color') {
            let data = [];
            const index = document.getElementsByClassName('checkAll')
            for (let i = 0; i < index.length; i++) {
                if(index[i].checked == true){
                    data.push(index[i].id)
                }
            }
            sessionStorage.setItem('data',data)
            navigate('/settlement')
        }
    }
    return (
        <div className="table wrapper">
            <div className="tr">
                <div>商品</div>
                <div>单价</div>
                <div>数量</div>
                <div>小计</div>
                <div>操作</div>
            </div>
            {shopping.length > 0 ?
                shopping.map((item) => {
                    return (
                        <div className="th" key={item.id}>
                            <div className="pro clearfix">
                                <label className="fl">
                                    <input type="checkbox" id={item.id} className="checkAll" onClick={(e) => { checkOne(item, e) }} />
                                    <span></span>
                                </label>
                                <a className="fl" href="#">
                                    <dl className="clearfix">
                                        <dt className="fl imgsize"><img src={'/avatars' + item.photo1} /></dt>
                                        <dd className="fl">
                                            <p>{item.name}</p>
                                            <p className='label_width'>{item.label}</p>
                                        </dd>
                                    </dl>
                                </a>
                            </div>
                            <div className="price cartext">￥{item.price}</div>
                            <div className="number">
                                <p className="num clearfix">
                                    <button onClick={(e) => { subtract(item, e) }}><img className="fl sub" src="/public/img/sub.jpg" /></button>
                                    <button><span className="fl">{item.quantity}</span></button>
                                    <button onClick={(e) => { add(item, e) }}><img className="fl add" src="/public/img/add.jpg" /></button>
                                </p>
                            </div>
                            <div className="price sAll cartext">￥{item.price * item.quantity}</div>
                            <div className="price cartext"><button onClick={(e) => { del(item, e) }}><a className="del">删除</a></button></div>
                        </div>
                    )
                })
                : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无商品" />
            }
            <div className="tr clearfix">
                <p className="fl mar_left">
                    <button onClick={all}><a>全选</a></button>
                </p>
                <p className="fr">
                    <span>共<small id="sl">{shoppingsum}</small>件商品</span>
                    <span>合计:&nbsp;<small id="all">￥{shoppingprice}</small></span>
                    <a onClick={(e) => { settlement(e) }} className={color}>结算</a>
                </p>
            </div>
        </div>
    )
}
